<template>
	<van-dialog
		class="dialog"
		v-model="show"
		show-cancel-button
		confirm-button-color="#8F44EB"
		cancel-button-text="取消"
		get-container="#app"
		:before-close="beforeClose"
	>
		<h4 class="title">申请退款</h4>
		<van-form
			ref="form"
			@submit="onSubmit"
			@failed="onFailed"
			:show-error-message="false"
			class="form"
		>
			<div class="form-item">
				<van-field
					v-model.trim="form.mobile"
					type="tel"
					placeholder="请输入手机号"
					maxlength="11"
					:rules="rules.mobile"
					:border="false"
				/>
				<div class="tips">请填写真实手机号，便于尽快退款</div>
			</div>
			<div class="form-item">
				<van-field
					v-model.trim="form.name"
					type="tel"
					placeholder="请输入姓名"
					maxlength="11"
					:rules="rules.name"
					:border="false"
				/>
			</div>
			<div class="form-item">
				<div class="uploader-tips">
					上传收款二维码图片
					<span>(最多三张)</span>
					<i>*</i>
				</div>
				<van-uploader :after-read="afterRead" :max-count="3" v-model="form.apply_image" />
				<div class="tips">请上传你的收款二维码，便于尽快退款</div>
			</div>
		</van-form>
	</van-dialog>
</template>
<script>
import { mobile } from '@/utils/pattern'
export default {
	props: ['order_id'],
	data() {
		return {
			show: false,
			form: {
				mobile: '',
				name: '',
				apply_image: [],
			},
			rules: {
				mobile: [
					{ required: true, message: '请填手机号' },
					{ pattern: mobile, message: '手机号格式不正确' },
				],
				name: [{ required: true, message: '请填姓名' }],
			},
			closeDone: null,
		}
	},
	methods: {
		open() {
			this.show = true
		},
		close() {
			this.show = false
			this.reset()
		},
		reset() {
			this.form = {
				mobile: '',
				name: '',
				apply_image: [],
			}
			this.$refs.form.resetValidation()
		},
		beforeClose(action, done) {
			this.closeDone = done
			if (action != 'confirm') {
				done()
				this.reset()
				return
			}
			this.submit()
		},
		submit() {
			this.$refs.form.submit()
		},
		// 表单错误
		onFailed({ errors }) {
			this.$toast({
				message: errors[0].message,
				position: 'top',
			})
			this.closeDone(false)
		},

		async onSubmit() {
			if (!this.form.apply_image || this.form.apply_image.length == 0) {
				this.$toast('请先上传收款二维码图片！')
				return false
			}

			let form = new FormData()
			if (this.form.apply_image.length) {
				this.form.apply_image.map((e) => {
					form.append('apply_image[]', e.file)
				})
			}
			form.append('order_sn', this.order_id)
			form.append('name', this.form.name)
			form.append('mobile', this.form.mobile)

			// let form = {
			// 	...this.form,
			// 	order_sn: this.order_id,
			// }
			await this.$api.refund(form).catch((err) => {
				this.$toast(err)
				this.closeDone(true)
				throw err
			})
			this.reset()
			this.$toast.success('提交退款申请成功')
			this.closeDone()
			this.$emit('submit', form)
		},
		async afterRead(file) {
			console.log(file)
		},
	},
}
</script>
<style lang="scss" scoped>
.title {
	text-align: center;
	font-size: 0.47222rem;
	font-weight: 500;
	padding: 0.55556rem 0;
}
.form {
	padding: 0 0.55556rem;
	&-item {
		margin-bottom: 0.55556rem;
		::v-deep {
			.van-field {
				flex: 1;
				margin: 0;
				border: $w1px solid #dfdfdf;
				background: #fcfcfc;
				border-radius: 0.13889rem;
				overflow: hidden;
				padding: 0.2rem;
				input {
					font-size: 0.333333rem;
				}
			}
		}
		.tips {
			margin-top: 0.13889rem;
			font-size: 0.27778rem;
			color: #ccc;
		}
	}
	.uploader-tips {
		font-size: 15px;
		margin-top: 15px;
		margin-bottom: 10px;
		font-weight: 500;
		i {
			color: #fa3534;
		}
		span {
			color: #ccc;
			font-size: 12px;
		}
	}
}
</style>
